<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 100px;
        }
    </style>
</head>

<body>
    <!--第一种：内联模型-->
    <button onclick="tell()">我是按钮</button>
    <script>
        //第一种：内联模型(不建议使用)
        function tell() {
            console.log("内联模型");
        }
        // 违反了内容与行为相分离原则

        // //第二种：脚本模型
        // var button = document.getElementsByTagName("button")[0];
        // button.onclick = function () {
        //     console.log("脚本模型1");
        // };
        // button.onclick = function () {
        //     console.log("脚本模型2");
        // };
        // // 第二个绑定事件覆盖第一个绑定事件
        // // 实现了内容与行为相分离，但元素只能绑定一个监听函数
    </script>
</body>

</html>